<template>
    <!-- 答题记录 -->
  <div class="answerbox" style="padding-top: 20px;">
    <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="paper_name" label="试卷名称"></el-table-column>
        <el-table-column prop="all_score" label="题目总分" width="100"></el-table-column>
        <el-table-column prop="score" label="总得分"  width="100"></el-table-column>
        <el-table-column label="答题时间" width="350">
            <template slot-scope="scope">
                <span>{{ scope.row.start_time + '至' + (scope.row.end_time || '未答题') }}</span>
            </template>
        </el-table-column>
        <!-- <el-table-column prop="user_name" label="答题人"></el-table-column> -->
        <!-- <el-table-column prop="user_phone" label="答题人手机号"></el-table-column> -->
        <el-table-column label="状态" width="120">
            <template slot-scope="scope">
                <span v-if="scope.row.status == '1'" style="color: red; font-weight: 600;">未交卷</span>
                <span v-if="scope.row.status == '2'" style="color: green; font-weight: 600;">已交卷</span>
            </template>
        </el-table-column>
        <el-table-column label="操作" width="120">
            <template slot-scope="scope">
                <el-button size="mini" v-if="scope.row.status == '1'" type="warning" @click="toExam(scope.row)">继续答题</el-button>
                <el-button size="mini" v-if="scope.row.status == '2'" @click="handleDetail(scope.row)">答题详情</el-button>
                <!-- <el-button size="mini" type="primary">删除</el-button> -->
            </template>
        </el-table-column>
    </el-table>
    <div class="pagebox" style="margin-top: 20px;">
        <el-pagination
            background
            layout="prev, pager, next"
            @current-change="changePage"
            :total="total">
        </el-pagination>
    </div>
    <Detail ref="detail" :testList="uanswerinfoList" :uanswer="uanswerInfo" :paper="paper" />
  </div>
</template>

<script>
import Api from '@/api'
import Detail from './components/Detail'
export default {
    components: {
        Detail
    },
    data() {
        return {
            tableData: [],
            total: 0,
            params: {
                pageNum: 1,
                pageSize: 10
            },
            uanswerinfoList: [],
            paper: {},
            uanswerInfo: {}
        }
    },
    mounted() {
        this.getTableList()
    },
    methods: {
        async handleDetail(item) {
            let res ;
            res = await Api.examPaperInfo({id: item.paper_id})
            this.paper = res.data

            res = await Api.getUanswerQuestionList({
                paper_id: item.paper_id,
                uanswer_id: item.id
            })
            this.uanswerinfoList = res.data[0].uanswerinfoList

            res = await Api.getExamUanswerInfo({id: item.id})
            this.uanswerInfo = res.data

            this.$refs.detail.visible = true
        },
        toExam(item) {
            this.$router.push(`/info/exam/${item.paper_id}?uanswer=${item.id}`)
        },
        getTableList() {
            Api.myAnswerlistPage(this.params).then(res => {
                this.tableData = res.data.rows || []
                this.total = res.data.total
            })
        },
        changePage(val) {
            this.params.pageNum = val
            this.getTableList()
        }
    }
}
</script>

<style>

</style>